<template>
    <view :class="{'padding30': !pageData.style}" :style="{background: pageData.bgColor}" v-if="pageData && pageData.audioSrc">
        <view class="player bgwhite d-flex hidden" :style="{borderRadius: `${pageData.radius*2}rpx`}" v-if="!pageData.style">
            <view class="cover p-re white">
                <image :src="$imgUrls(pageData.img)" mode="aspectFill" class="wh"></image>
                <text class="iconfont icon-24gf-pause2 p-ab size40" @click="clickAudio" v-if="onPlay"></text>
                <text class="iconfont icon-bofang3 p-ab size48" @click="clickAudio" v-else></text>
            </view> 
            <view class="flex-1 padding30">
                <view class="size30 bold ellipsis">{{ pageData.title }}</view>
                <view class="d-flex a-center">
                    <view class="color_66">{{ formatTime(currentTime) }}</view>
                    <slider class="flex-1" :value="currentTime" :max="duration" :activeColor="color" :block-size="10" :block-color="color" @change="sliderChange"></slider>
                    <view class="color_66">{{ formatTime(duration) }}</view>
                </view>
            </view>
        </view>

        <!-- 悬浮 -->
        <view class="float bor_radius" @click="clickAudio" v-if="pageData.style == 1 && pageData.img">
            <image :src="$imgUrls(pageData.img)" mode="aspectFill" class="wh playSpin" :style="{'animation-play-state': isRotate ? 'running' : 'paused'}"></image>
            <text class="iconfont icon-24gf-pause2 p-ab size28" v-if="isRotate"></text>
            <text class="iconfont icon-bofang3 p-ab size36" v-else></text>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    props: ['pageData'],
    data() {
        return {
            audioCtx: null,
            onPlay: false,
            currentTime: 0,
            duration: 0,   
        }
    },
    computed: {
        ...mapState(['color', 'audioComp', 'audioOnPlay']),
        isRotate() {
            return this.pageData.global ? this.audioOnPlay : this.onPlay
        }
    },
    created() {
        if(this.pageData.style == 1 && this.pageData.global) return this.setAudio(this.pageData) // 悬浮窗-全局播放
        if(!this.audioCtx) this.initAudio() // 当页播放
    },
    methods: {
        ...mapMutations(['setAudio']),
        initAudio(){
            this.audioCtx = uni.createInnerAudioContext()
            this.audioCtx.src = this.pageData.audioSrc
            if(this.pageData.autoplay) { // 自动播放
                this.audioCtx.autoplay = true
                this.onPlay = true
            }
            this.audioCtx.loop = this.pageData.loop
            this.audioCtx.onEnded(() => { // 自然播放结束，循环播放时不会触发
                this.onPlay = false
                this.currentTime = 0
            })

            if(this.pageData.style == 1) return
            this.audioCtx.onCanplay(() => { // 获取音频长度
                let timer = setInterval(() => {
                    if(this.audioCtx.duration != 0) {
                        this.duration = this.audioCtx.duration
                        clearInterval(timer)
                    }
                }, 500)
            })
            this.audioCtx.onTimeUpdate(() => { // 更新进度
                this.currentTime = this.audioCtx.currentTime
            })
        },
        clickAudio(){
            if(this.pageData.style == 1 && this.pageData.global) {
                this.setAudio({audioOnPlay: this.audioComp.paused})
                return
            }
            this.onPlay = !this.onPlay
            if(this.onPlay) {
                this.audioCtx.play()
            } else {
                this.audioCtx.pause()
            }
        },
        sliderChange(e){
            this.currentTime = e.detail.value
            this.audioCtx.seek(e.detail.value)
        },
        formatTime(val){
            let m = parseInt(val / 60)
            let s = parseInt(val % 60)
            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s
            return m + ':' + s
        }
    },
    beforeDestroy() {
        if(this.audioCtx) {
            if(this.pageData.style == 0) {
                this.audioCtx.offCanplay()
                this.audioCtx.offTimeUpdate()
            }
            this.audioCtx.offEnded()
            this.audioCtx.destroy()
            this.audioCtx = null
            this.onPlay = false
        }
    }
}
</script>

<style lang="scss" scoped>
.player {
    width: 690rpx;
    height: 150rpx;
    box-shadow: 3rpx 3rpx 6rpx #ccc;
}
.cover {
    width: 150rpx;
    height: 150rpx;
}
.icon-bofang3, .icon-24gf-pause2 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.float {
    width: 90rpx;
    height: 90rpx;
    box-shadow: 3rpx 3rpx 6rpx #ccc;
    position: fixed;
    right: 40rpx;
    bottom: calc(140rpx + constant(safe-area-inset-bottom));
    bottom: calc(140rpx + env(safe-area-inset-bottom));
    z-index: 100;
    color: rgba(255,255,255,0.8);
}
.playSpin {
    animation: spin 5s linear infinite;
}
@keyframes spin {
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}
</style>